<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人分类扇形图</title>
    <script th:src="@{/js/echarts.min.js}"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        #pieChart {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小的DOM -->
<div id="pieChart"></div>

<script type="text/javascript">
    // 初始化图表
    var pieChart = echarts.init(document.getElementById('pieChart'));

    // 准备数据
    var categories = [];
    var counts = [];

    <th:block th:each="item : ${dataCountByCategory}">
        categories.push([[${item.category}]]);
        counts.push({
            value: [[${item.count}]],
            name: [[${item.category}]],
            itemStyle: {
                color: [[${item.category}]] == '家人' ? '#ff7675' : '#74b9ff'
            }
        });
    </th:block>

    // 配置项
    var option = {
        title: {
            text: '联系人分类分布',
            subtext: '家人和朋友分类统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: categories
        },
        series: [
            {
                name: '联系人数量',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: counts
            }
        ]
    };

    // 使用配置项显示图表
    pieChart.setOption(option);

    // 响应式调整大小
    window.addEventListener('resize', function() {
        pieChart.resize();
    });
</script>
</body>
</html>